<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>Triangle Puzzle</title>  
<style>  
  .triangle {  
    width: 100px;  
    height: 100px;  
    position: absolute;  
    cursor: pointer;  
  }  
 
  #triangle1, #triangle2 {  
    position: absolute;  
  }  
  #formula {  
    margin-top: 200px;  
  }   
</style>  
</head>  
<body>  
  
    <canvas id="triangle1" width="100" height="100"></canvas>  
    <canvas id="triangle2" width="100" height="100" style="left: 200px; top: 100px;"></canvas>
  
<input type="text" id="formula" readonly>  
<button onclick="validateFormula()">检验</button>  
  
<script >
function drawTriangle(canvasId, angle1, angle2) {  
  const canvas = document.getElementById(canvasId);  
  const ctx = canvas.getContext('2d');  
  
  // 计算三角形的边长  
  const sideOpposite = 50; // 对边长度  
  const sideAdjacent = sideOpposite * Math.tan(angle1 * Math.PI / 180); // 邻边长度  
  const sideHypotenuse = sideOpposite / Math.sin(angle1 * Math.PI / 180); // 斜边长度  
  
  // 绘制三角形  
  ctx.beginPath();  
  ctx.moveTo(0, sideOpposite); // 起点在顶部  
  ctx.lineTo(sideAdjacent, 0); // 第一个点在左边  
  ctx.lineTo(0, 0); // 第二个点在原点  
  ctx.closePath();  
  ctx.stroke();  
  
  // 标记角度（可选）  
  ctx.font = '16px Arial';  
  ctx.fillStyle = 'black';  
//   ctx.fillText(angle1 + '°', 10, 20);  
//   ctx.fillText(angle2 + '°', sideAdjacent - 10, 20);  
//   ctx.fillText('90°', sideAdjacent / 2, sideOpposite + 10);  
}  
  
// 绘制30°-60°-90°三角形  
drawTriangle('triangle1', 30, 60);  
  
// 绘制45°-45°-90°三角形  
drawTriangle('triangle2', 45, 45);  
    const triangle1 = document.getElementById('triangle1');  
const triangle2 = document.getElementById('triangle2');  
const formulaInput = document.getElementById('formula');  
  
let isDragging1 = false;  
let isDragging2 = false;  
let startX1, startY1, startX2, startY2;  
  
triangle1.addEventListener('mousedown', (e) => {  
  isDragging1 = true;  
  startX1 = e.clientX - triangle1.getBoundingClientRect().left;  
  startY1 = e.clientY - triangle1.getBoundingClientRect().top;  
});  
  
triangle2.addEventListener('mousedown', (e) => {  
  isDragging2 = true;  
  startX2 = e.clientX - triangle2.getBoundingClientRect().left;  
  startY2 = e.clientY - triangle2.getBoundingClientRect().top;  
});  
  
document.addEventListener('mousemove', (e) => {  
  if (isDragging1) {  
    const x = e.clientX - startX1;  
    const y = e.clientY - startY1;  
    triangle1.style.transform = `translate(${x}px, ${y}px) rotate(${getRotationDegree(x, y)}deg)`;  
  }  
  if (isDragging2) {  
    const x = e.clientX - startX2;  
    const y = e.clientY - startY2;  
    triangle2.style.transform = `translate(${x}px, ${y}px) rotate(${getRotationDegree(x, y)}deg)`;  
  }  
});  
  
document.addEventListener('mouseup', () => {  
  isDragging1 = false;  
  isDragging2 = false;  
});  
  
function getRotationDegree(x, y) {  
  const angle = Math.atan2(y, x) * (180 / Math.PI);  
  return angle < 0 ? 360 + angle : angle;  
}  
  
function validateFormula() {  
  const triangle1Angle = triangle1.style.transform.match(/rotate\((.*?)\)deg/)[1];  
  const triangle2Angle = triangle2.style.transform.match(/rotate\((.*?)\)deg/)[1];  
  const totalAngle = parseInt(triangle1Angle) + parseInt(triangle2Angle);  
  formulaInput.value = `${triangle1Angle}° + ${triangle2Angle}° = ${totalAngle}°`;  
  // 在这里你可以添加额外的逻辑来与后端通信，验证算式的正确性  
}  
  
// 对于点击生成算式和吸附功能，你可能需要添加更多的事件监听和逻辑处理  
// 这里只是展示了如何获取三角形的角度并相加显示到输入框中
</script>  
</body>  
</html>